<template>
    <div>
        <head>
            <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
            <title>美多商城-用户中心</title>
            <link rel="stylesheet" type="text/css" href="/static/css/reset.css">
            <link rel="stylesheet" type="text/css" href="/static/css/main.css">
        </head>
        <body>
            <div id="app" v-cloak>
            <headers></headers>

            <div class="main_con clearfix">
                <div class="left_menu_con clearfix">
                    <h3>用户中心</h3>
                    <ul>
                        <li><a href="user_center_info.html" class="active">· 个人信息</a></li>
                        <li><a href="user_center_order.html">· 全部订单</a></li>
                        <li><a href="user_center_site.html">· 收货地址</a></li>
                        <li><a href="user_center_pass.html">· 修改密码</a></li>
                    </ul>
                </div>
                <div class="right_content clearfix">
                        <div class="info_con clearfix">
                            <h3 class="common_title2">基本信息</h3>
                            <ul class="user_info_list" v-for="i in user" :key="i.id">
                                <li><span>用户名：</span>{{i.username}}</li>
                                <li><span>联系方式：</span>{{i.mobile}}</li>
                                <li>
                                <span>Email：</span>
                                <input type="text" name="email" class="email" v-model="email">
                                <input type="button" name="" value="保 存"  @click="valideEmail">
                                <input type="reset" name="" value="取 消">
                                </li>		
                            </ul>
                        </div>
                        
                        <h3 class="common_title2">最近浏览</h3>
                        <div class="has_view_list">
                            <ul class="goods_type_list clearfix">
                        <li>
                            <a href="detail.html"><img src="/static/images/goods/goods003.jpg"></a>
                            <h4><a href="detail.html">360手机 N6 Pro 全网通</a></h4>
                            <div class="operate">
                                <span class="price">￥2699.00</span>
                                <span class="unit">台</span>
                                <a href="#" class="add_goods" title="加入购物车"></a>
                            </div>
                        </li>

                        <li>
                            <a href="detail.html"><img src="/static/images/goods/goods004.jpg"></a>
                            <h4><a href="#">360手机 N6 Pro 全网通</a></h4>
                            <div class="operate">
                                <span class="price">￥2699.00</span>
                                <span class="unit">台</span>
                                <a href="#" class="add_goods" title="加入购物车"></a>
                            </div>
                        </li>

                        <li>
                            <a href="detail.html"><img src="/static/images/goods/goods005.jpg"></a>
                            <h4><a href="#">360手机 N6 Pro 全网通</a></h4>
                            <div class="operate">
                                <span class="price">￥2699.00</span>
                                <span class="unit">台</span>
                                <a href="#" class="add_goods" title="加入购物车"></a>
                            </div>
                        </li>

                        <li>
                            <a href="detail.html"><img src="/static/images/goods/goods006.jpg"></a>
                            <h4><a href="#">360手机 N6 Pro 全网通</a></h4>
                            <div class="operate">
                                <span class="price">￥2699.00</span>
                                <span class="unit">台</span>
                                <a href="#" class="add_goods" title="加入购物车"></a>
                            </div>
                        </li>

                        <li>
                            <a href="detail.html"><img src="/static/images/goods/goods007.jpg"></a>
                            <h4><a href="#">急速路由</a></h4>
                            <div class="operate">
                                <span class="price">￥64.5</span>
                                <span class="unit">6.45/500g</span>
                                <a href="#" class="add_goods" title="加入购物车"></a>
                            </div>
                        </li>
                    </ul>
                </div>
                </div>
            </div>
            <footers></footers>
            </div>
        </body>
    </div>
</template>

<script>
import axios from 'axios'
import Headers from './Headers.vue'
import Footers from './Footers.vue'
export default {
  components: { Headers, Footers },
    data() {
        return {
            email:'',
            userid:localStorage.getItem('userid'),
            user:''

        }
    },
    methods: {
        valideEmail(){
            //正则
            var reg = /^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(.[a-zA-Z0-9_-]+)+$/
            if(!reg.test(this.email)){
                alert('邮箱格式不对')
                return false
            }
            this.axios.get('users/send_mail/?email='+this.email+'&userid'+this.userid).then(res=>{
                console.log(res.data) 
            })
        },
        getUserByid(){
            this.axios.get('users/userbyid/?userid='+this.userid).then(res=>{
                console.log(res.data)
                this.user = res.data
            })
        }

    },
    created() {
        this.getUserByid()
    }
}
</script>

<style scoped>

</style>
